<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Blog Page</title>
        <!-- 引入jQuery3.6.0 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <style>
            body {
            	/* 图片引自百度 可根据需求变换 */
                background-image: url(img/1.jpg);
            }
            .text {
                color: white;
                text-shadow: 5px 5px gray;  /* 字体阴影 */
                font-size: 35px;
                font-family: STXingkai;
            }
            .source {
                color: white;
                font-size: 25px;
                padding-left: 40%;
                font-family: STXingkai;
            }
            .show-sentence {
                display: none;    /* 一开始隐藏div标签 */
                text-align: center;
            }
        </style>
        <script>
        	// 异步ajax
            $.ajax({
                type: 'GET',
                url: 'https://api.fghrsh.net/hitokoto/rand/?encode=jsc&uid=3335',
                success: function(data){
                    $(".text").text(data.hitokoto);  // 获取名言内容
                    if (data.source){     // 如果来源不为空
                        $(".author").text(data.source);
                    } else {
                        $(".source").hide();   // 隐藏来源
                    }
                    // 淡入显示
                    $(".show-sentence").fadeIn(4000)
                },
            });
        </script>
    </head>
    <body>
        <div class="show-sentence">
            <p class="text"></p>
            <p class="source">
                ———— <span class="author"></span>
            </p>
        </div>
    </body>
</html>
